

//详情页的逻辑代码
//0 获取
const contentBox = document.querySelector('.content');



//获取sessionStorage
const goods_id = window.sessionStorage.getItem('iid') - 0;

if(!goods_id){
    window.location.href = './list.html';
    throw new Error('没有您查看的商品详情');
}
getInfo()
function getInfo(){
  
    var shop = datelist.find(function (item) {
        return item.id === goods_id;
      })
    var goods_two =goods_id +1;
    var shopp = datelist.find(function (item) {
        return item.id === goods_two;
      })
    contentBox.innerHTML = `
    <div class="glass left_l" id="glass">
        <div class="show">
            <img src="${shop.image}" alt="">

            <div class="mask"></div>
        </div>

        <div class="list">
            <p class="active">
                <img 
                    src="${shop.image}"
                    data-show="${shop.image}"
                    data-bigglass="${shop.image}"
                    alt="">
            </p>
            <p>
                <img 
                    src="${shopp.image}" 
                    data-show="${shopp.image}"
                    data-bigglass="${shopp.image}"
                    alt="">
            </p>
        </div>

        <div class="bigglass" style="background-image: url('${shop.image}');"></div>
    </div>
        <div class="right_r">
            <p class="title">${shop.name}</p>
            <p class="price">
                ￥ ${shop.jdPrice}
            </p>
            <p class="number">
                <button>-</button>
                <input type="text" value="1">
                <button>+</button>
            </p>
            <p>
                <button class="tijiao">加入购物车</button>
            </p>
        </div>

    `
}

// *********************************************************************************************************
const btncart = document.querySelector('.tijiao')
btncart.onclick=function(){
    window.sessionStorage.setItem('cart',goods_id)
    window.location.href = './cart.html'
}


function Glass (ele){
    this.ele = document.querySelector(ele);
    this.show = this.ele.querySelector('.show');
    this.mask = this.ele.querySelector('.mask');
    this.list = this.ele.querySelector('.list');
    this.bigglass = this.ele.querySelector('.bigglass');

    this.show_width = this.show.offsetWidth;
    this.show_height = this.show.offsetHeight;

    this.mask_width = parseInt(window.getComputedStyle(this.mask).width);
    this.mask_height = parseInt(window.getComputedStyle(this.mask).height);

    this.bigglass_width = parseInt(window.getComputedStyle(this.bigglass).backgroundSize.split(' ')[0]);
    this.bigglass_height = parseInt(window.getComputedStyle(this.bigglass).backgroundSize.split(' ')[1]);



    this.init();
}

Glass.prototype.init = function (){
    this.setScale();
    this.overOut();
    this.changeList()
    this.move();

}
Glass.prototype.setScale = function(){
    this.big_width = this.bigglass_width * this.mask_width / this.show_width;
    this.big_height = this.bigglass_height * this.mask_height / this.show_height;

    this.bigglass.style.width = this.big_width + 'px';
    this.bigglass.style.height = this.big_height + 'px';

}

Glass.prototype.overOut = function(){
    this.show.addEventListener('mouseover',()=>{
        this.bigglass.style.display = 'block';
        this.mask.style.display = 'block';
    })
    this.show.addEventListener('mouseout',()=>{
        this.mask.style.display = 'none';
        this.bigglass.style.display = 'none';
    })
}
    
Glass.prototype.changeList = function(){
    this.list.addEventListener('mouseover',(e)=>{
        e = e || window.event;
        const target = e.target || e.srcElement;
        if(target.nodeName === 'IMG'){
            const show_url = target.dataset.show;
            const bigglasss = target.dataset.bigglass;

           this.show.firstElementChild.src = show_url;
           this.bigglass.style.backgroundImage = `url(${bigglasss})`
        
            for(let i = 0 ; i< this.list.children.length ; i++){
                this.list.children[i].classList.remove('active');
            }
            target.parentElement.classList.add('active');
        }
    })
}
Glass.prototype.move = function(){
    this.show.addEventListener('mousemove',(e)=>{
        e = e || window.event;
        
        let x = e.offsetX - this.mask_width/2;
        let y = e.offsetY - this.mask_height/2;

        if(x<0) x =0;
        if(y<0) y = 0;
        if(x>this.show_width-this.mask_width) x = this.show_width-this.mask_width;
        if(y>this.show_height - this.mask_height)  y= this.show_height - this.mask_height;

        this.mask.style.left = x + 'px';
        this.mask.style.top = y + 'px';

        const bgx = x * this.big_width / this.mask_width;
        const bgy = y * this.big_height / this.mask_height;

        this.bigglass.style.backgroundPosition = `-${bgx}px -${bgy}px`


    })


}
const e = new Glass ('#glass');






